<template>
    <div>
        <el-form ref="loginFormRef" :model="loginForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="用户名" prop="account">
                <el-input v-model="loginForm.account" placeholder="admin" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="loginForm.password" show-password autocomplete="new-password" />
            </el-form-item>
            <el-form-item label="" prop="remember">
                <el-checkbox v-model="loginForm.remember" label="记住我" size="small" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(loginFormRef)">
                    登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import { login } from '../../api/login';
import { useRouter } from 'vue-router';
import { useRouterStore } from '../../store/router'
import { setupDynamicRoutes } from '../../router/index'

const { setRouters } = useRouterStore();
const router = useRouter();

interface RuleForm {
    account: string,
    password: string,
    remember?: boolean
}
const loginFormRef = ref<FormInstance>()
const formSize = ref('default')
const loginForm = reactive<RuleForm>({
    account: localStorage.getItem('account') || '',
    password: localStorage.getItem('password') || '',
    remember: localStorage.getItem('remember') == 'true' || false
})
const rules = reactive<FormRules<RuleForm>>({
    account:
        { required: true, message: '用户名不能为空', trigger: 'blur' },

    password:
        { required: true, message: '密码不能为空', trigger: 'blur' },

})


const submitForm = async (formEl: FormInstance | undefined) => {

    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            login(loginForm).then(res => {


                localStorage.setItem('token', res.token)
                localStorage.setItem('userInfo', JSON.stringify(res.userInfo))
                localStorage.setItem('remember', JSON.stringify(loginForm.remember))
                setRouters([{ path: 'home', component: 'Home' }, 
                            { path: 'text', component: 'Text' }])
                setupDynamicRoutes()
                if (loginForm.remember) {
                    localStorage.setItem('account', loginForm.account)
                    localStorage.setItem('password', loginForm.password)
                } else {
                    localStorage.removeItem('account')
                    localStorage.removeItem('password')
                    localStorage.removeItem('remember')
                }
                router.push('/')
            }
            ).catch(err => {
                console.log(err)
            })

        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>
<style scoped></style>